<template>
    <div class="section-wrap hide-perfect-detail">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患编号</label>
                </div>
                <div>
                    <!-- <input type="text"
                           value="20191011"> -->
                    <p>{{detailData.No}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患类别</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{detailData.Category}}</p>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>隐患描述</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p class="textarea"
                       v-if="detailData.Description">{{detailData.Description}}</p>
                    <textarea v-else
                              placeholder="请输入隐患描述（自行换行）"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <label>整改前照片</label>
                    <span>当前共{{detailData.ProblemImgs&&detailData.ProblemImgs.length>0?detailData.ProblemImgs.length:uploadLength}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload v-if="detailData.ProblemImgs&&detailData.ProblemImgs.length>0"
                            :imgList="detailData.ProblemImgs"
                            key="1"></upload>
                    <upload v-else
                            @setFormData="setFormData"
                            key="2"></upload>
                    <!-- <chooseImage v-if="detailData.ProblemImgs&&detailData.ProblemImgs.length>0"
                                 :imgList="detailData.ProblemImgs"
                                 :showUploadBtn="false"
                                 key="1">
                    </chooseImage>
                    <chooseImage v-else-if="showSubmit"
                                 @setFormData="setFormData"
                                 key="2"></chooseImage>
                    <div class="upload-wrap" v-else>
                        <strong class="no-img">暂无图片</strong>
                    </div> -->
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>隐患措施</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <span v-if="detailData.Measure"
                          @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div>
                    <p class="textarea"
                       v-if="detailData.Measure"
                       :class="{'unfold':unfoldMeasure}">{{detailData.Measure | myTrim}}</p>
                    <textarea v-else
                              placeholder="请输入隐患描述（自行换行）"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患级别</label>
                </div>
                <div>
                    <p v-if="detailData.HdLevel">{{detailData.HdLevel}}</p>
                    <input type="text"
                           v-else>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改开始时间</label>
                </div>
                <div v-if="detailData.ResolveStartTime">
                    <p>{{detailData.ResolveStartTime.split(' ')[0]}}</p>
                </div>
                <group v-else>
                    <datetime v-model="ResolveStartTime"></datetime>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改结束时间</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div v-if="detailData.ResolveEndTime">
                    <p>{{detailData.ResolveEndTime.split(' ')[0]}}</p>
                </div>
                <group v-else>
                    <datetime v-model="ResolveEndTime"></datetime>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>被检查单位</label>
                </div>
                <div>
                    <p v-if="detailData.DeptName">{{ detailData.DeptName}}</p>
                    <input v-else
                           type="text"
                           value="某某单位">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>被检查单位负责人</label>
                </div>
                <div>
                    <p v-if="detailData.ProjectDutyPerson">{{ detailData.ProjectDutyPerson}}</p>
                    <input v-else
                           type="text"
                           value="李周华">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患部位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{ detailData.ResolveArea}}</p>
                    <!-- <group v-else-if="areaArr[0]">
                        <popup-picker :data="areaArr"
                                      v-model="areaValue"
                                      placeholder="请选择"
                                      @on-change="changeArea"></popup-picker>
                    </group> -->
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改责任人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="right-select"
                     v-if="detailData.ResolveArea=='无'&&!detailData.ResolveAreaDutyPerson"
                     @click="newperson">
                    <p>
                        {{ResolveAreaDutyPerson?ResolveAreaDutyPerson:'请选择'}}
                        <i class="iconfont icon-jinru rightmsg"></i>
                    </p>
                </div>
                <div v-else>
                    <!-- <p v-if="detailData.ResolveAreaDutyPerson">{{detailData.ResolveAreaDutyPerson}}{{ResolveAreaDutyPerson}}</p>
                    <p v-else>{{ResolveAreaDutyPerson}}</p> -->
                    <p>{{detailData.ResolveAreaDutyPerson}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改单位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div v-if="detailData.ResolveDeptName">
                    <p>{{detailData.ResolveDeptName}}</p>
                </div>
                <group v-else-if="DepartArr[0]">
                    <popup-picker :data="DepartArr"
                                  v-model="DepartValue"
                                  placeholder="请选择"
                                  @on-change="changeDepart"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改执行人</label>
                </div>
                <div>
                    <p>{{detailData.ResolveDutyPersonName?detailData.ResolveDutyPersonName:ResolveDutyPersonName}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改班组</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div v-if="detailData.ResolveGroup">
                    <p>{{detailData.ResolveGroup}}</p>
                </div>
                <group v-else-if="!detailData.ResolveGroup&&teamArr.length!==0">
                    <popup-picker :data="teamArr"
                                  v-model="teamValue"
                                  placeholder="请选择"
                                  @on-change="changeTeam"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改班组责任人</label>
                </div>
                <div>
                    <p>{{detailData.ResolveGroupDutyPerson?detailData.ResolveGroupDutyPerson:ResolveGroupDutyPerson}}</p>
                </div>
            </div>
        </div>
        <div class="form-section">
            <h3>检查人信息</h3>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查单位</label>
                </div>
                <div>
                    <p v-if="detailData.CheckDeptName">{{detailData.CheckDeptName}}</p>
                    <input v-else
                           type="text"
                           v-model="CheckDeptName">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查人</label>
                </div>
                <div>
                    <p v-if="detailData.CheckPerson">{{detailData.CheckPerson}}</p>
                    <input v-else
                           type="text"
                           v-model="CheckPerson">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>电话</label>
                </div>
                <div>
                    <p v-if="detailData.Tel">{{detailData.Tel}}</p>
                    <input v-else
                           type="text"
                           v-model="Tel">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查时间</label>
                </div>
                <div>
                    <p v-if="detailData.CheckTime">{{detailData.CheckTime.split(' ')[0]}}</p>
                    <input v-else
                           type="text"
                           v-model="CheckTime">
                </div>
            </div>
            <div class="btns">
                <!-- <button>保存</button> -->
                <button class="green width200"
                        v-if="showSubmit"
                        @click="perfectDetail">提交</button>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
import upload from '@/commonComponents/upload/index'
// import chooseImage from '@/commonComponents/chooseImage/index'
export default {
    name: 'hidePerfectDetail',
    data () {
        return {
            detailData: {},
            uploadLength: 0,
            unfoldMeasure: false, // 展开隐患措施
            ResolveStartTime: '', // 开始时间
            ResolveEndTime: '', // 结束时间
            Departs: [], // 整改单位集合
            DepartArr: [], // 整改单位集合格式化成我们需要的
            DepartValue: [], // 选择整改的整改单位
            teams: [], // 整改班组
            teamArr: [], // 整改班组集合格式化成我们需要的
            teamValue: [], // 选择的整改班组
            // areas: [], // 隐患区域
            // areaArr: [], // 隐患区域集合格式化成我们需要的
            // areaValue: [], // 选择的隐患区域
            ResolveDeptName: '', // 整改单位
            ResolveDeptId: '', // 整改单位id
            ResolveDutyPersonName: '', // 整改执行人
            ResolveGroup: '', // 整改的班组
            ResolveGroupId: '', // 整改班组ID
            ResolveGroupDutyPerson: '', // 整改班组负责人
            CheckDeptName: '', // 检查单位
            CheckPerson: '', // 检查人
            Tel: '', // 检查人电话
            CheckTime: '', // 检查时间
            Description: '', // 隐患描述
            ResolveArea: '', // 隐患部位
            ResolveAreaDutyPerson: '', // 整改责任人
            ResolveAreaDutyPersonId: '', // 真该责任人id
            userInfo: '',
            showSubmit: true,
            localIds: [], // 本地图片id
            uploadImgFormData: null
            // ProblemImgs: [] // 调用微信上传图片返回的id
        }
    },
    components: {
        upload,
        myMenu
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        sessionStorage.setItem('pid', '')
        this.showSubmit = !(this.$route.query.type == 1 || this.getQuery().type == 1)
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.ResolveAreaDutyPerson = this.$store.state.hiddenlist.resolveAreaDutyPerson
        this.ResolveAreaDutyPersonId = this.$store.state.hiddenlist.resolveAreaDutyPersonId
        this.getData()
    },
    methods: {
        newperson () {
            sessionStorage.setItem('pid', this.detailData.DeptId)
            this.$router.push({ path: '/yhperson' })
        },
        // setFormData (localIds, problemImgs, uploadLength) {
        // this.localIds = localIds
        // this.ProblemImgs = problemImgs
        setFormData (formData, uploadLength) {
            this.uploadImgFormData = formData
            this.uploadLength = uploadLength
        },
        changeDepart (value) {
            // 选择整改单位
            this.ResolveDeptName = value[0]
            for (let i = 0; i < this.Departs.length; i++) {
                if (this.Departs[i].deptName === this.ResolveDeptName) {
                    this.ResolveDeptId = this.Departs[i].deptId
                    this.ResolveDutyPersonName = this.Departs[i].DutyPerson
                    this.getTeam()
                    return false
                }
            }
        },
        changeArea (value) {
            // 选择的隐患区域
            this.ResolveArea = value[0]
            for (let i = 0; i < this.Departs.length; i++) {
                if (this.areas[i].name === this.ResolveArea) {
                    this.ResolveAreaDutyPersonId = this.areas[i].pId
                    this.ResolveAreaDutyPerson = this.areas[i].pName
                    return false
                }
            }
        },
        changeTeam (value) {
            // 选择整改班组
            this.ResolveGroup = value[0]
            for (let i = 0; i < this.teams.length; i++) {
                if (this.teams[i].deptName === this.ResolveGroup) {
                    this.ResolveGroupId = this.Departs[i].deptId
                    this.ResolveGroupDutyPerson = this.Departs[i].DutyPerson
                    return false
                }
            }
        },
        getData () {
            let params = {
                'allowPaging': false,
                'business': 'FetchHiddenDanger',
                'data': this.$route.query.id || this.getQuery().id,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.detailData = res.data.data
                    if (this.detailData.ResolveDeptName) {
                        this.getTeam()
                    }
                    this.getDeparts()
                    // this.getAreas()
                }
            }).catch(() => {

            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        getDeparts () {
            // 获取整改单位
            let params = {
                'allowPaging': true,
                'business': 'GetDeparts',
                'data': {
                    'deptId': this.detailData.DeptId,
                    'type': '2'
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.Departs = res.data.data
                    let arr = []
                    this.Departs.forEach((item) => {
                        arr.push(item.deptName)
                    })
                    arr[0] = arr[0] ? arr[0] : ''
                    this.DepartArr[0] = arr
                    this.$forceUpdate()
                }
            }).catch(() => {

            })
        },
        getTeam () {
            // 获取班组
            let params = {
                'allowPaging': true,
                'business': 'GetDeparts',
                'data': {
                    'deptId': this.detailData.DeptId,
                    'type': '3'
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.teamArr = []
            this.teamValue = []
            this.ResolveGroupDutyPerson = ''
            this.ResolveGroupId = ''
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.teams = res.data.data
                    let arr = []
                    this.teams.forEach((item) => {
                        arr.push(item.deptName)
                    })
                    arr[0] = arr[0] ? arr[0] : ''
                    this.teamArr[0] = arr
                    this.$forceUpdate()
                }
            }).catch(() => {

            })
        },
        // getAreas () {
        //     // 获取隐患区域
        //     let params = {
        //         'allowPaging': true,
        //         'business': 'GetAreas',
        //         'data': {
        //             'deptId': this.detailData.DeptId,
        //             'projectId': this.$route.query.id
        //         },
        //         'pageIndex': 0,
        //         'pageSize': 20,
        //         'tokenId': '',
        //         'userId': this.userInfo.userid
        //     }
        //     this.$axiosAjax.getConfigJson(params).then((res) => {
        //         if (res.data.code === 0) {
        //             this.areas = res.data.data
        //             let arr = []
        //             this.areas.forEach((item) => {
        //                 arr.push(item.name)
        //             })
        //             arr[0] = arr[0] ? arr[0] : ''
        //             this.areaArr[0] = arr
        //             this.$forceUpdate()
        //         }
        //     }).catch(() => {

        //     })
        // },
        perfectDetail () {
            let data = {}
            for (let key in this.detailData) {
                data[key.replace(key[0], key[0].toLowerCase())] = this.detailData[key] ? this.detailData[key] : this[key]
            }
            if (data.resolveArea == '无') {
                data.resolveAreaDutyPerson = data.resolveAreaDutyPerson || this.ResolveAreaDutyPerson
                data.resolveAreaDutyPersonId = data.resolveAreaDutyPersonId || this.ResolveAreaDutyPersonId
            }
            if (data.no === '') {
                this.$vux.toast.text('请输入隐患编号')
            } else if (data.category === '') {
                this.$vux.toast.text('请选择隐患类别')
            } else if (data.description === '') {
                this.$vux.toast.text('请输入隐患描述')
            } else if (data.unfoldMeasure === '') {
                this.$vux.toast.text('请输入隐患措施')
            } else if (data.resolveEndTime === '') {
                this.$vux.toast.text('请输入整改结束时间')
            } else if (data.resolveArea === '') {
                this.$vux.toast.text('请输入隐患部位')
            } else if (!data.resolveAreaDutyPerson) {
                this.$vux.toast.text('请选择整改责任人')
            } else if (data.resolveDeptName === '' && data.resolveArea !== '无') {
                this.$vux.toast.text('请输选择整改单位')
            } else if (data.resolveGroup === '' && data.resolveArea !== '无') {
                this.$vux.toast.text('请输选择整改班组')
            } else {
                this.$vux.loading.show({
                    text: '正在提交...'
                })
                let params = {
                    'allowPaging': true,
                    'business': 'PostHiddenDanger',
                    'data': data,
                    'method': 'confirm',
                    'pageIndex': 0,
                    'pageSize': 20,
                    'tokenId': '',
                    'userId': this.userInfo.userid
                }
                // params.data.problemImgs = []
                // if (this.detailData.ProblemImgs.length == 0) {
                //     params.data.ProblemImgs = this.ProblemImgs
                // } else {
                //     params.data.ProblemImgs = []
                // }

                // this.$axiosAjax.getConfigJson(params).then((res) => {
                this.$axiosAjax.getConfigJson(params, this.uploadImgFormData).then((res) => {
                    if (res.data.code === 0) {
                        this.$vux.toast.text('提交成功')
                        setTimeout(() => {
                            this.$router.replace('/hidePerfect')
                        }, 1000)
                    }
                }).catch(() => {

                }).finally(() => {
                    this.$vux.loading.hide()
                })
            }
        }
    }
}
</script>
<style scoped>
.select-section {
    display: flex;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 58px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
</style>
<style>
.hide-perfect-detail .icon-jinru:before {
    color: #c8c8cd;
}
</style>
